<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>非标准化地址匹配系统</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/static/css/layui.css">
    <link rel="stylesheet" href="/static/css/tzhhone.css">

</head>

<body>
    <!-- 导航 -->
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-blue">非标准化地址匹配系统</div>
            <ul class="layui-nav layui-layout-left">


            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">导入<span id="toLead" class="layui-badge layui-bg-green">0</span></a>
                </li>
{#                <li class="layui-nav-item">#}
{#                    <a href="javascript:;">清洗中<span class="layui-badge layui-bg-orange">0</span></a>#}
{#                </li>#}
                <li class="layui-nav-item">
                    <a href="javascript:;">已完成<span id="toSucc" class="layui-badge">0</span></a>
                </li>

            </ul>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->

            <div class="layui-tab layui-tab-brief" lay-filter="tabTxtToFile">
              <ul class="layui-tab-title">
                <li class="layui-this">文本处理</li>
                <li>文件处理</li>
              </ul>
              <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">
                      <div class="layui-field-box">
                          <div class="layui-panel">
                             <div style="padding: 30px;">
                                  <form class="layui-form" action="">
                                      <div class="layui-form-item">
                                          <textarea name="text" required lay-verify="required" placeholder="请输入待处理的非标准化地址" class="layui-textarea"></textarea>

                                      </div>
                                      <div class="layui-form-item">
                                          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>

                                      </div>
                                  </form>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="layui-tab-item">
                      <blockquote class="layui-elem-quote">请上传txt文件（最大不超过500kb），地址一行一个。若需处理复杂文件请下载 <a target="_blank" href="https://api.images.tzhhone.cn/blog/img/20210830011923.zip" >可执行程序</a></blockquote>
                      <div class="layui-field-box">
                        <div class="layui-panel">
                          <div style="padding: 30px;">
                              <button type="button" class="layui-btn" id="uploadTxt">
                                <i class="layui-icon">&#xe67c;</i>上传文件
                              </button>

                          </div>

                        </div>
                      </div>
                  </div>

              </div>
            <div id="jdt" class="layui-progress layui-progress-big layui-hide" lay-showPercent="true" style="margin:0px 20px 20px 20px" lay-filter="progress">
                <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
            </div>
            </div>


            <div style="padding: 15px">
                <button class="layui-btn layui-btn-normal layui-hide" id="resultsDerived">导出全部结果(CSV)</button>
                <button class="layui-btn layui-btn-danger" id="clearTable">清空列表</button>
                <table id="tableAddress" lay-filter="tableAddress">

                </table>
                <div style="min-height: 400px; width: 100%;" id="map"></div>

            </div>
            <div style="height: 50px"></div>


        </div>
        <div class="layui-footer footer">
            <!-- 底部固定区域 -->
            <p>Copyright © 2021 <a href="http://address.tzhhone.cn">address.tzhhone.cn</a></p>


        </div>
    </div>
    <!-- 工具条 -->
    <script type="text/html" id="barDemo">

      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="look">位置</button>
      </div>
    </script>
    <!-- 引入 layui.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.3/socket.io.min.js"></script>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=gUmCtZ9N9Oz4SAO3Et4cAjSLIL0xY7BH"></script>
    <script src="/static/layui.js"></script>
    <script src="/static/map.js"></script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        function addMarker(longitude, latitude){
            var marker1 = new BMapGL.Marker(new BMapGL.Point(longitude,latitude ));
            map.addOverlay(marker1);
        }

    </script>

    <script>
        var map = new BMapGL.Map('map'); // 创建Map实例
        map.centerAndZoom('北京市', 12); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        map.setHeading(64.5); //3D视角
        map.setTilt(73);
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
        map.addControl(zoomCtrl);
        var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
        map.addControl(navi3DCtrl);
        // 创建城市选择控件
        var cityControl = new BMapGL.CityListControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(10, 5)
        });
        // 将控件添加到地图上
        map.addControl(cityControl);



    </script>


    <script>

        var url = window.location.host;

        var socket = io.connect('ws://'+url+'/adderss');
        var $ = layui.$;
        let tabledata = [];
        socket.on('putTxt', function(msg) {
            if (msg.code === 0){
                console.log(msg.count);
                $("#jdt").removeClass("layui-hide");
                $("#toLead").text(msg.count);
                tabledata = [];

            }
        });


        //切换tab
        layui.use(['element','table'], function(){
          var element = layui.element;
          var table = layui.table;
          var arrayCheckStatus = [];

          var checkedArr=[];
          //加载表格
          table.render({
            elem: '#tableAddress'
            ,height: 350
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,data: []
            ,page:true
            ,toolbar: 'default'
            ,limits:[20,50,100,200,500,1000,1500,2000]
            ,limit: 20
            ,cols: [[ //表头
                {type:'checkbox'}
               ,{field: 'id', title: 'ID',type:"numbers",sort: true}

              ,{field: '地址名称', title: '地址名称'}
              ,{field: '行政区划中文', title: '行政区划'}
              ,{field: '街路巷中文', title: '街路巷'}
              ,{field: '门牌号', title: '门牌号'}
              ,{field: '门牌后缀中文', title: '门牌后缀'}
              ,{field: '幢楼号', title: '幢楼号'}
              ,{field: '幢楼后缀中文', title: '幢楼后缀'}
              ,{field: '单元号', title: '单元号'}
              ,{field: '室号', title: '室号'}
              ,{field: '室号后缀中文', title: '室号后缀'}
              ,{fixed: 'right',title:'操作', width:80, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器


            ]]
          });

        //工具条事件
        table.on('tool(tableAddress)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
          var data = obj.data; //获得当前行数据
          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

           console.log(data);
          if(layEvent === 'look'){ //查看

             //addMarker(116.404,39.925)
              //创建地址解析器实例
                var myGeo = new BMapGL.Geocoder();
                // 将地址解析结果显示在地图上，并调整地图视野
                myGeo.getPoint(data["地址名称"], function(point){
                    if(point){
                        var allOverlays = map.getOverlays();
                        console.log(allOverlays.length);
                        allOverlays.forEach((item)=>{
                             console.log("ces:"+item);
                            map.removeOverlay(item);
                        });




                        map.centerAndZoom(point, 16);
                        map.addOverlay(new BMapGL.Marker(point, {title: data["地址名称"]}))


                    }else{
                        alert('您选择的地址没有解析到结果！');
                    }
                }, '北京市')
          }
        });
        //工具条事件
        table.on('toolbar(tableAddress)', function(obj){
          var checkStatus = table.checkStatus(obj.config.id);

          switch(obj.event){
            case 'delete':




                 arrayCheckStatus.forEach((item) => {
                    item.remove(); //删除dom结构
                })
            break;
          };
        });

            table.on('checkbox(tableAddress)', function (obj) {
                // console.log(obj.tr) //得到当前行元素对象
                var tr = obj.tr; //得到当前点击复选框的行元素对象
                if (obj.type === 'all') { //点击全选按钮触发此处
                    var len = arrayCheckStatus.length;
                    arrayCheckStatus.splice(0, len); //全选后删除数组项，重新添加全选的dom元素


                    //arrayCheckStatus.push(obj.tr.prevObject[0]);
                } else {
                    if (obj.checked) { //多选框被选中则添加dom元素到数组.

                        arrayCheckStatus.push(tr);
                    } else {//取消多选框的选中则在数组中删除自己

                        var indexs = obj.tr[0].rowIndex;  //获取取消选中的元素对象下标
                        arrayCheckStatus.forEach((item, index) => {
                            //当数组中任意一个元素的rowIndex值与取消复选框的元素对象属性rowIndex的下标值相等，则在数组中删除该元素
                            if (item[0].rowIndex == indexs) {
                                arrayCheckStatus.splice(index, 1);
                            }
                        });
                    }
                }
            });

          //一些事件触发
          element.on('tab(tabTxtToFile)', function(data){
            console.log(data);
          });
          //按钮事件
          $("#resultsDerived").click(function(){
               if(tabledata.length <= 0){
                   layer.msg("没有数据可供您导出，请先处理数据");
               }else{
                   layer.msg("正在导出数据");
                   table.exportFile("tableAddress", tabledata);
               }



            });
          //清空
          $("#clearTable").click(function(){
              tabledata = []
               table.reload('tableAddress', {elem: '#tableAddress',data: []});
            });

          //进度条切换
          socket.on('words', function(msg) {
            if (msg.code === 0){

                $("#toSucc").text(msg.count);
                element.progress('progress', msg.progress + '%')



                tabledata.push(msg.data[0])
                if(msg.progress >= 100){

                     table.reload('tableAddress', {elem: '#tableAddress',data: tabledata});
                     $("#resultsDerived").removeClass("layui-hide");
                     $("#jdt").addClass("layui-hide");
                }


            }
          });
          //进度条切换
          socket.on('words_arr', function(msg) {
            if (msg.code === 0){
                if($("#toLead").text() !== msg.countAll){
                    $("#toLead").text(msg.countAll);
                }

                $("#toSucc").text(msg.count);
                element.progress('progress', msg.progress + '%');


                msg.data.forEach((item)=>{
                    tabledata.push(item)
                })

                if(msg.progress >= 100){
                     element.progress('progress', '100%')
                     table.reload('tableAddress', {elem: '#tableAddress',data: tabledata});
                     $("#resultsDerived").removeClass("layui-hide");
                     $("#jdt").addClass("layui-hide");

                }

            }
          });


        });
        //上传
        layui.use('upload', function(){
          var upload = layui.upload;

          //执行实例
          var uploadInst = upload.render({
            elem: '#uploadTxt' //绑定元素
            ,url: '/upload' //上传接口
            ,accept: 'file' //允许上传的文件类型
            ,exts: 'txt'
            ,size: 500 //最大允许上传的文件大小
            ,done: function(res){
                if(res.code === 0){
                    layer.msg('上传成功，请耐心等待系统解析。（因服务器配置太差，解析时间可能会比较久）');

                    $("#jdt").removeClass("layui-hide");
                    socket.emit('upload', {code:0,data:res.data});
                    tabledata = [];

                }

            }
            ,error: function(){
              //请求异常回调
            }
          });
        });
        //提交
        layui.use('form', function(){
          var form = layui.form;

          //监听提交
          form.on('submit(formDemo)', function(data){

            socket.emit('putTxt', data.field);

            return false;
          });
        });


    </script>
    <script>


    </script>

</body>


</html>